<style>
.vertical-align-middle{
  padding-top: 100px;
}
</style>
<div class="vertical-align-wrap">
  <div class="vertical-align-middle">
    <div class="auth-box ">
      <div class="left">
        <div class="content">
          <div class="header">
            <div class="logo text-center">
              <img src="/public2/img/logo-dark.png" alt="Klorofil Logo">
            </div>
            <p class="lead">Login to your account</p>
          </div>
          <form class="form-auth-small" id="login" onSubmit="submit">
            <div class="form-group">
              <label for="signin-email" class="control-label sr-only">UserName</label>
              <input class="form-control" id="username" value="" placeholder="UserName">
            </div>
            <div class="form-group">
              <label for="signin-password" class="control-label sr-only">Password</label>
              <input type="password" class="form-control" id="password" value="" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary btn-lg btn-block">LOGIN</button>
          </form>
        </div>
      </div>
      <div class="right">
        <div class="overlay"></div>
        <div class="content text">
          <h1 class="heading">Free Bootstrap dashboard template</h1>
          <p>by The Develovers</p>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
<script>
$(function(){
  $('#login').on('submit',function(e){
  e.preventDefault();
  $.get('/admin/loginAction?username='+$('#username').val()+'&password='+$('#password').val(),
    function(data){
      if(data.status === 0){
        window.location = '/admin';
      }else{
        alert(data.message);
      }
    })
  })
})
</script>
